<html>
<head>
    <style>
         @import url(../plus.css);
         @import url(../../+micro-charts/micro-chart.css);
         
         div { flow: horizontal; }
         div > * { display:block; margin: 1* 1em; }
         div > svg.chart.donut { size: 20dip; }
         
    </style>

    <script type="text/tiscript">
        namespace Data // our model
        {
          var val = 0.5; // observable variable
        }
    </script>
</head>

<body model="Data">

    <p>Two inputs and one svg.chart.donut are all bound to the same Data.val variable:</p>

    <div>
      <svg.chart.donut(val) value="0.0/1.0" />
      <input|decimal(val) min="0" max="1.0" step="0.1" />
      <input|hslider(val) min="0" max="1.0" step="0.1" />    
    </div>
    
</body>
</html>